<template>
  <BaseDialog
    :visible="visible"
    title="分组管理"
    width="800px"
    :close-on-click-modal="false"
    footer-type="close"
    @update:visible="$emit('update:visible', $event)"
    @close="$emit('close')"
  >
    <div class="group-management-content">
      <div class="group-actions">
        <el-button 
          size="small" 
          type="primary" 
          :disabled="!hasSelectedCameras"
          @click="$emit('move-to-group')"
        >
          移动到分组
        </el-button>
        <div class="group-crud-actions">
          <el-button size="small" @click="$emit('add-group')">
            <el-icon><Plus /></el-icon>
          </el-button>
          <el-button size="small" @click="$emit('edit-group')" :disabled="!hasSelectedGroup">
            <el-icon><Edit /></el-icon>
          </el-button>
          <el-button size="small" type="danger" @click="$emit('delete-group')" :disabled="!hasSelectedGroup || isRootNode">
            <el-icon><Minus /></el-icon>
          </el-button>
        </div>
      </div>
      
      <!-- 搜索框 -->
      <div class="search-section">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索摄像机名称..."
          size="small"
          clearable
          @input="handleSearchInput"
          @clear="handleSearchClear"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      
      <!-- 使用新的Tree V2组件 -->
      <ChannelTreeV2
        ref="channelTreeRef"
        v-model="selectedCameraIds"
        :height="400"
        :search-keyword="searchKeyword"
        @check="handleCameraCheck"
        @node-click="handleNodeClick"
      />
    </div>
  </BaseDialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElButton, ElIcon, ElInput } from 'element-plus'
import { Plus, Edit, Minus, Search } from '@element-plus/icons-vue'
import ChannelTreeV2 from '@/components/ChannelTreeV2.vue'
import type { ChannelTreeNode } from '@/types'

// Props
interface Props {
  visible: boolean
  groupList: any[]
  selectedGroup: any
  hasSelectedCameras: boolean
  hasSelectedGroup: boolean
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  'close': []
  'move-to-group': []
  'add-group': []
  'edit-group': []
  'delete-group': []
  'select-group': [group: any]
  'update:visible': [value: boolean]
  'camera-selection-change': [selectedCameras: ChannelTreeNode[]]
}>()

// 响应式数据
const selectedCameraIds = ref<string[]>([])
const selectedCameras = ref<ChannelTreeNode[]>([])
const channelTreeRef = ref()
const searchKeyword = ref('')

// 计算属性
const hasSelectedCameras = computed(() => selectedCameraIds.value.length > 0)

// 检查选中的是否为根节点
const isRootNode = computed(() => {
  return props.selectedGroup && props.selectedGroup.id === 1
})

// 方法
const handleCameraCheck = (checkedKeys: string[], checkedNodes: ChannelTreeNode[]) => {
  selectedCameraIds.value = checkedKeys
  selectedCameras.value = checkedNodes.filter(node => node.type === 'camera')
  emit('camera-selection-change', selectedCameras.value)
}

const handleNodeClick = (data: ChannelTreeNode) => {
  if (data.type === 'group') {
    emit('select-group', data.data?.originalData)
  }
}

// 搜索相关方法
const handleSearchInput = () => {
  // 搜索逻辑由 ChannelTreeV2 组件内部处理
}

const handleSearchClear = () => {
  searchKeyword.value = ''
}

// 刷新通道树数据
const refreshChannelTree = async () => {
  if (channelTreeRef.value && channelTreeRef.value.loadData) {
    await channelTreeRef.value.loadData()
  }
}

// 暴露方法给父组件
defineExpose({
  refreshChannelTree
})
</script>

<style scoped>
.group-management-content {
  max-height: 600px;
  overflow-y: auto;
}

.group-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 4px;
}

.group-crud-actions {
  display: flex;
  gap: 8px;
}

.search-section {
  margin-bottom: 16px;
}

/* 滚动条样式 */
.group-management-content::-webkit-scrollbar {
  width: 6px;
}

.group-management-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.group-management-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.group-management-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
